<template>
  <div class="zhu_1">
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :xs="24" :sm="20" :md="20" :lg="12" :xl="12">
        <el-card class="form-container" shadow="never">
          <el-form
            :model="menu"
            :rules="rules"
            ref="menuFrom"
            label-width="150px"
          >
            <el-form-item label="菜单名称：" prop="title">
              <el-input v-model="menu.title"></el-input>
            </el-form-item>
            <el-form-item label="上级菜单：">
              <el-select v-model="menu.parentId" placeholder="请选择菜单">
                <el-option
                  v-for="item in selectMenuList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="前端路径：" prop="authName">
              <el-input v-model="menu.name"></el-input>
            </el-form-item>
            <el-form-item label="前端图标：">
              <el-input v-model="menu.icon" style="width: 80%"></el-input>
              <span
                style="margin-left: 8px; font-size: 28px"
                :class="menu.icon"
              ></span>
            </el-form-item>
            <el-form-item label="是否显示：">
              <el-radio-group v-model="menu.hidden">
                <el-radio :label="2">是</el-radio>
                <el-radio :label="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="排序：">
              <el-input v-model="menu.sort"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit('menuFrom')"
                >提交</el-button
              >
              <el-button v-if="!isEdit" @click="resetForm('menuFrom')"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
//   import {fetchList, createMenu, updateMenu, getMenu} from '@/api/menu';
import { getAuthMenu, editMenu, addMenu} from "@/api/user_list";
const defaultMenu = {

};
export default {
  name: "MenuDetail",
  props: {
    isEdit: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      menu: Object.assign({}, defaultMenu),
      selectMenuList: [],
      rules: {
        title: [
          { required: true, message: "请输入菜单名称", trigger: "blur" },
          {
            min: 2,
            max: 140,
            message: "长度在 2 到 140 个字符",
            trigger: "blur",
          },
        ],
        name: [
          { required: true, message: "请输入前端名称", trigger: "blur" },
          {
            min: 2,
            max: 140,
            message: "长度在 2 到 140 个字符",
            trigger: "blur",
          },
        ],
        icon: [
          { required: true, message: "请输入前端图标", trigger: "blur" },
          {
            min: 2,
            max: 140,
            message: "长度在 2 到 140 个字符",
            trigger: "blur",
          },
        ],
      },
      type: "",
    };
  },
  watch: {
    $route() {
      console.log("路有变化");
    },
  },
  created() {
    console.log(this.$route);
    this.getSelectMenuList();

   if (this.$route.fullPath != "/access/menuDetail") {
     
      this.type = this.$route.query.type;
      localStorage.setItem("type",this.$route.query.type );
      if(this.$route.query.type == 0){
         this.menu = JSON.parse(this.$route.query.id);
         localStorage.setItem("menu", JSON.stringify(this.menu));
         
      console.log("获取传参");
      }
     
    } else if (this.$route.fullPath == "/access/menuDetail") {
      console.log("获取缓存");
      this.type = localStorage.getItem("type");
      if(this.type==0){
         this.menu = JSON.parse(localStorage.getItem("menu"));
      }
     
    }
 
    
  },
  methods: {
    getSelectMenuList() {
      getAuthMenu().then((response) => {
        this.selectMenuList = response.data.data;
        this.selectMenuList.unshift({ id: 0, title: "无上级菜单" });
        console.log(this.selectMenuList);
      });
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm("是否提交数据", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            console.log(this.type);
            if (this.type==0) {
              console.log(this.menu);
              editMenu(this.menu).then((response) => {
                console.log(response);
                this.$message({
                  message: "修改成功",
                  type: "success",
                  duration: 1000,
                });
                this.$router.back();
              });
            } else {
              console.log(this.menu)
              //添加属性
              this.menu.level = this.menu.parentId == 0 ? 0 : 1;
              addMenu(this.menu).then((response) => {
                this.$refs[formName].resetFields();
                this.resetForm(formName);
                this.$message({
                  message: "提交成功",
                  type: "success",
                  duration: 1000,
                });
                this.$router.back();
              });
            }
          });
        } else {
          this.$message({
            message: "验证失败",
            type: "error",
            duration: 1000,
          });
          return false;
        }
      });
    },
    //编辑菜单
    editMenu(menu) {},
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.menu = Object.assign({}, defaultMenu);
      this.getSelectMenuList();
    },
  },
};
</script>

<style scoped>
.zhu_1 {
  margin-top: 20px;
}
.form-container {
  padding: 20px;
}
</style>
